<template>
    <div>
        <h1>显示列表</h1>
        <input type="date" v-model="p.d1">
        至
        <input type="date" v-model="p.d2">
        <input type="button" value="查找" @click="cha" class="btn">
        <table class="table">
            <thead>
                <tr>
                    <td>Name</td>
                    <td>Phone</td>
                    <td>Img</td>
                    <td>CreateDate</td>
                    <td>Sex</td>
                    <td>State</td>
                    <td>Hobby</td>
                    <td>LevelId</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in data">
                    <td>{{ item.name }} </td>
                    <td>***</td>
                    <td>
                        <img style="height: 100px; height: 100px;" :src="'https://localhost:7124'+item.img" alt="">
                    </td>
                    <td>{{ item.dateTime }}</td>
                    <td :style=" 'color:'+ (item.sex?'green':'red')+';' ">{{ item.sex==1?"男":"女"}}</td>
                    <td :style=" 'color:'+ (item.state?'green':'red')+';' ">{{ item.state?"开启":"禁止" }}</td>
                    <td>{{ item.hobby }}</td>
                    <td>{{ item.levelId }}</td>
                    <td>操作</td>
                </tr>
            </tbody>
        </table>

        共 <span style="color: red;"> {{ p.pcount }} </span> 页/当前第 <span style="color: red;">{{ p.index }}</span>  页，共 <span style="color: red;">{{ p.pcount }}</span>  行/当前第 <span style="color: red;">{{ p.size }}</span>  行

        <br>

        <a href="#" @click="Page(1)">首页</a>|
        <a href="#" @click="Page(2)">上一页</a>|
        <a href="#" @click="Page(3)">下一页</a>|
        <a href="#" @click="Page(4)">尾页</a>

        <select @change="SizeChange" v-model="p.size">
            <option value="3">3</option>
            <option value="6">6</option>
            <option value="9">9</option>
        </select>

        <input type="text" v-model="p.index">
        <input type="button" value="确认" @click="IndexChange">
            </div>
        </template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref } from 'vue';

onMounted(()=>{
    GetData();
})

const cha=()=>{
    p.value.index=1;
    GetData();
}

const IndexChange=()=>{
    if( p.value.index<p.value.pcount)
    {
        p.value.index<p.value.pcount;
    }
    if( p.value.index*0!=0)
    {
        p.value.index=1;
    }
    GetData();
}

const SizeChange=()=>{
    p.value.index=1;
    GetData();
}

const Page=(v:any)=>{
    if(v==1){
        p.value.index=1;
    }
    if(v==2){
       if( p.value.index>1){
        p.value.index-=1;
       }
    }
    if(v==3){
        if( p.value.index<p.value.pcount){
        p.value.index+=1;
       }
    }
    if(v==4){
        p.value.index=p.value.pcount;
    }
    GetData();
} 
const data=ref([{
    "id": 1,
      "name": "admin",
      "password": "202cb962ac59075b964b07152d234b70",
      "rePassword": "123",
      "img": "/pic/1.jpg",
      "dateTime": "2025-02-14T11:06:12.251",
      "sex": 1,
      "state": true,
      "hobby": "跳舞,登山,打太极,打篮球",
      "levelId": 1
}])
const p=ref({
    index:1,
    size:3,
    d1:"",
    d2:"",
    count:0,
    pcount:0
})
const GetData=()=>{
    axios.get("https://localhost:7124/api/ZuoYeInfo/GetZuoYePage",{params:p.value}).then(res=>{
        data.value=res.data.data;

        p.value.count=res.data.count;
        p.value.pcount=Math.ceil(p.value.count/p.value.size);
    })
}
</script>

<style scoped>

</style>